<!DOCTYPE html>
<html>

<head>
    <!--    <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> -->
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="/public/css/element-ui/index.css">
    <link rel="stylesheet" href="/public/css/icon/iconfont.css">

    <!-- import Vue before Element -->
    <script src="/public/js/vue.js"></script>
    <!-- 引入 http-vue-loader -->
    <script src="/public/js/http-vue-loader"></script>
    <title>办公管理</title>
    
</head>

<body>


    <div id="app">
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="grid-content">
                            <a href="/" target="_self">
                                <el-image style="width: 200px; height: 38px" src="./statics/images/logo.png"
                                    fit="contain"></el-image>
                            </a>
                        </div>
                    </el-col>
                    <el-col :span="14">
                        <div class="grid-content " style="line-height: 40px;">

                            <el-row>
                                <el-col :span="2">
                                    <div class="grid-content" style="text-align: center">
                                        <el-image style="width: 40px; height: 40px" src="./statics/images/head.png">
                                        </el-image>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content">
                                        <span>上午好！吴先生</span>
                                        <i class="el-icon-check"></i>
                                    </div>
                                </el-col>
                            </el-row>


                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="grid-content" style="height: 40px;line-height: 40px;text-align: right">
                            <quanxian-text></quanxian-text>
                            <i class="el-icon-refresh-right" style="font-size: 20px"></i>
                            <i class="el-icon-full-screen" style="font-size: 20px;margin-left: 10px;"></i>
                            <i class="el-icon-close" style="font-size: 20px;margin-left: 10px;"></i>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="220px">

                    <menus></menus>

                    <div class="button-list">
                        <div class="block">
                            <el-button @click="open">网络查询</el-button>
                        </div>
                        <div class="block">
                            <el-button>企业微信</el-button>
                        </div>
                        <div class="block">
                            <el-button @click="open2" class="el-icon-search">搜索</el-button>
                        </div>
                    </div>

                    <div class="rili">
                        <img style="width: 100%" src="./statics/images/rili.png" alt="">
                        <div class="rili-buttom">
                            <el-button class="item" size="mini">审批</el-button>
                            <el-button class="item" size="mini">公告</el-button>
                            <el-button class="item" size="mini">
                                <el-badge :value="0" :max="99">
                                    邮件
                                </el-badge>
                            </el-button>

                        </div>
                        <div class="rili-buttom" style="padding-bottom: 20px">
                            <el-button class="item" size="mini">日程</el-button>
                            <el-button class="item" size="mini">秘书</el-button>
                            <el-button class="item" size="mini">电话</el-button>
                        </div>
                    </div>
                    
                </el-aside>
                <el-container :style="{height: mainHeight}">
                    <el-main :style="{height: mainHeight}">
                        <div class="content-main">
                            <el-tabs type="border-card">
                                <el-tab-pane label="消息中心(通知)">
                                    <message-list></message-list>
                                    <a href="/public/images/oa/xxzx-5k.jpg"  target="_blank">参考1</a>
                                    <a href="/public/images/oa/xxzx.jpg"  target="_blank">参考2</a>
                                    <a href="/public/images/oa/txsz.jpg"  target="_blank">提醒设置</a>
                                </el-tab-pane>
                                <el-tab-pane label="申请管理">

                                    <el-tabs type="border-card">
                                        <el-tab-pane label="全部">
                                            <approval-list></approval-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="请假">
                                            <!-- <approval-list></approval-list> -->
                                        </el-tab-pane>
                                        <el-tab-pane label="借销">
                                            <!-- <approval-list></approval-list> -->
                                        </el-tab-pane>

                                        <!-- <el-tab-pane label="报价">
                                            <approval-list></approval-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="预算报价">
                                            <approval-list></approval-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="订单">
                                            <approval-list></approval-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="采购单">
                                            <approval-list></approval-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="外发">
                                            <approval-list></approval-list>
                                        </el-tab-pane> -->
                                    </el-tabs>  
                                    <a href="/public/images/pm/wdbl.jpg"  target="_blank">我的办理</a>
                                    <div>自助办理
                                   <a href="/public/images/pm/zm/zzzmsq.jpg"  target="_blank">在职证明</a>
                                   <a href="/public/images/pm/zm/srzmsq.jpg"  target="_blank">收入证明</a>
                                   <a href="/public/images/pm/zm/lzzmsq.jpg"  target="_blank">离职证明</a>
                                   <a href="/public/images/pm/zm/gsgxzmsq.jpg"  target="_blank">公司关系证明</a>
                                   <a href="/public/images/pm/zm/gzdzmsq.jpg"  target="_blank">工资单证明</a>
                                   <a href="/public/images/pm/zm/blfsq.jpg"  target="_blank">不落户证明</a>
                                   <a href="/public/images/pm/zm/gszmsq.jpg"  target="_blank">工伤证明</a>
                                   <a href="/public/images/pm/zm/syzmsq.jpg"  target="_blank">失业证明</a>
                                   </div>
                                   <div>自助申请
                                    <span>请假申请</span>
                                    <a href="/public/images/pm/sq/tx.jpg"  target="_blank">调休申请</a>
                                    <a href="/public/images/pm/sq/ccwc.jpg"  target="_blank">外出申请</a>
                                    <a href="/public/images/pm/sq/jb.jpg"  target="_blank">加班申请</a>
                                    <a href="/public/images/pm/sq/hybx.jpg"  target="_blank">报销申请</a>
                                    <a href="/public/images/pm/sq/zz.jpg"  target="_blank">转正申请</a>
                                    <a href="/public/images/pm/sq/gwtz.jpg"  target="_blank">调岗申请</a>
                                    <a href="/public/images/pm/sq/yrxq.jpg"  target="_blank">用工需求</a>

                                   </div>
                                </el-tab-pane>
                                <el-tab-pane label="报销管理">
                                   <approval-list></approval-list>
                                </el-tab-pane>
                                <el-tab-pane label="计划管理">
                                    <plan-list></plan-list>
                                </el-tab-pane>
                                <el-tab-pane label="项目管理">
                                    <!-- <project-list></project-list> -->
                                    <el-tabs type="border-card">

                                        <el-tab-pane label="项目看板">  
                                            <div><a href="/public/images/oa/project/xm-info.jpg"  target="_blank">新建</a>
                                                <a href="/public/images/oa/project/xm-info.jpg"  target="_blank">新建-任务</a>
                                                <a href="/public/images/oa/project/xm-info.jpg"  target="_blank">新建-阶段设置</a>
                                            </div>
                                            <div><a href="/public/images/oa/project/xm-info-rw.jpg"  target="_blank">任务</a>
                                                <a href="/public/images/oa/project/xm-info-rw.jpg"  target="_blank">任务-添加</a>
                                                <a href="/public/images/oa/project/xm-info-gtt.jpg"  target="_blank">甘特图</a>
                                                <a href="/public/images/oa/project/xm-info-gx.jpg"  target="_blank">共享</a>
                                                <a href="/public/images/oa/project/xm-info-gx-add.jpg"  target="_blank">共享-添加</a>
                                                <a href="/public/images/oa/project/xm-add-jd.jpg"  target="_blank">阶段</a>
                                            </div>
                                            <img class="img-demo" src="/public/images/oa/project/xm-info.jpg"/>
                                            
                                            
                                        </el-tab-pane>
                                        <el-tab-pane label="我的项目">
                                           
                                            <img class="img-demo" src="/public/images/oa/project/wdxm.jpg"/>
                                        </el-tab-pane>


                                    </el-tab>


                                </el-tab-pane>
                                <!-- <el-tab-pane label="通知公告">
                                    
                                </el-tab-pane> -->

                            </el-tabs>
                        </div>
                    </el-main>

                </el-container>
            </el-container>
            <el-footer style="height: 18px;">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content" style="text-align: center;font-size: 12px;min-height: 18px;">
                            Copyright ©2013 柏毓MOM系统 All rights reserved
                        </div>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>

    </div>


</body>


<!-- import JavaScript -->
<script src="/public/js/index.js"></script>
<script>
    Vue.use(httpVueLoader)

    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                value: new Date(),
                mainHeight: '790px',
                input1: '',
                input2: '',
                input3: '',
                select: ''
            }
        },
        components: {
            // 将组建加入组建库

            'user-list': 'url:./component/user-list.vue',
            // 'dept-list': 'url:./component/dept-list.vue',
            // 'post-list': 'url:./component/post-list.vue',
            //   'staff-file-management': 'url:./component/staff-file-management.vue',
            //   'attendance-management': 'url:./component/attendance-management.vue',
            //   'train-management': 'url:./component/train-management.vue',
            //   'fixed-assets-management': 'url:./component/fixed-assets-management.vue',
            //   'logistics-management': 'url:./component/logistics-management.vue',
            //   'vehicle-management': 'url:./component/vehicle-management.vue',
            //   'company-system-management': 'url:./component/company-system-management.vue',
            //   'achievements-management': 'url:./component/achievements-management.vue',
            //   'social-security-management': 'url:./component/social-security-management.vue',
            'menus': 'url:./component/menus.vue',
            'quanxian-text': 'url:./component/quanxian-text.vue',
            'message-list':'url:./component/message-list.vue',
            'approval-list':'url:./component/approval-list.vue',
        },
        methods: {
            open() {
                this.$prompt('请输入搜索内容', '百度搜索', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    // inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '搜索内容是: ' + value
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    })
                })
            },
            open2() {
                this.$prompt('请输入搜索内容', '全局搜索', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    // inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '搜索内容是: ' + value
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    })
                })
            },
            goto(link) {
                console.log(link)
                window.location.href = './' + link + '.html'
            }
        },
        created() {
            var height = document.documentElement.clientHeight
            var newHeight = height - 40 - 20
            this.mainHeight = newHeight + 'px'
            return 1
        }
    })
</script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .img-demo {
        max-width: 100%;
        max-height: 100%;
    }

    .el-dialog__body {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .item-w230 .el-form-item {
        width: 230px;
        float: left;
        margin-bottom: 5px;
    }

    .item-w300 .el-form-item {
        width: 300px;
        float: left;
        margin-bottom: 5px;
    }

    .item-w270 .el-form-item {
        width: 270px;
        float: left;
        margin-bottom: 5px;
    }

    .item-50 .el-form-item {
        width: 50%;
        float: left;
        margin-bottom: 5px;
    }

    .rili-time {
        font-size: 24px;
        color: red;
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }

    .el-carousel__container {
        height: 340px;
    }

    .el-aside .el-carousel {
        margin: 5px;
        border: 2px solid #ccc;
        border-radius: 9px;
    }

    .rili {
        margin: 5px;
        border: 2px solid #ccc;
        border-radius: 9px;
        margin-top: 0px;
        border-top: none;
        padding: 10px 0 0 0;
    }

    .rili-block {
        border: 1px solid #ccc;
        /*padding: 20px;*/
    }

    .rili-date {
        display: block;
        width: 100%;
        font-size: 18px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        padding: 10px 0;
    }

    .rili-day {
        font-size: 35px;
        color: blue;
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }

    .rili-xingqi,
    .rili-nongli {
        display: block;
        width: 100%;
        text-align: center;
    }

    .rili-xingqi {
        font-size: 12px;
        line-height: 20px;
    }

    .rili-nongli {
        font-size: 12px;
        color: red;
        line-height: 20px;
    }

    .rili-buttom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }

    .rili-buttom .item {
        flex-grow: 0;
        margin-top: 10px;
    }

    .rili .el-badge__content.is-fixed {
        right: 0px;
    }

    .content-main {
        background-color: #f5f5f5;
        border: 1px solid #99bce8;
        margin-top: 5px;
    }

    .msg-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .msg-content .block {
        width: 30%;
        height: 125px;
        border-radius: 8px;
        margin: 10px;
        background-color: #fff;

    }

    .msg-content .panel-inner {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .msg-content .panel-inner .avatar .el-avatar {
        background-color: #fff;
        color: #47a87f;
        border: 1px solid #47a87f;
        font-size: 36px;
    }

    .msg-content .panel-inner .avatar {
        margin-top: 20px;
        margin-left: 40px;
    }

    .msg-content .panel-inner .title,
    .msg-content .panel-inner .msg-counts {
        display: flex;
        flex-direction: column;
        margin: 20px;
    }

    .msg-content .panel-inner .title .msg-title {
        font-size: 20px;
    }

    .msg-content .panel-inner .title .msg-total {
        font-size: 12px;
        margin-top: 20px;
    }

    .msg-content .panel-inner .msg-counts .item {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .msg-content .panel-inner .msg-counts .item span:last-child {
        font-size: 16px;
        color: red;
    }

    .demo-basic--circle,
    .button-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .button-list {
        margin: 5px;
        margin-bottom: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        /*border: 2px solid #ccc;*/
        /*border-radius: 9px;*/
    }

    .button-list .block {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*flex-grow: 1;*/
        margin-top: 10px;
    }

    .button-list .block .el-button {
        padding: 12px 5px !important;
    }


    .demo-basic--circle .block {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*flex-grow: 1;*/
        margin-top: 15px;
        cursor: pointer;
        color: #8492a6;
    }

    .demo-basic--circle .block:hover {
        background-color: #e95352;
        color: #fff;
        border-radius: 8px;
    }

    .demo-basic--circle .block .title {
        margin-top: 10px;
        font-size: 14px;

        text-align: center;
    }

    .demo-basic--circle .el-avatar {
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
        color: #fff;
        background: #f5f5f5;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #f5f5f5;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #f5f5f5;
    }

    .el-header {
        height: 40px !important;
        background-color: #b81f1f;
        color: #fff;
    }

    .el-footer {
        background-color: #000;
        color: #A4A4A4;
        /*text-align: center;*/
        /*line-height: 60px;*/
    }

    .el-aside {
        background-color: #fff;
        color: #333;
        /*text-align: center;*/
        /*line-height: 200px;*/
    }

    .el-main {
        /*background-color: #E9EEF3;*/
        /*color: #333;*/
        padding: 0px;
        padding-top: 5px;
        /*text-align: center;*/
        /*line-height: 160px;*/
    }

    body>.el-container {
        margin-bottom: 40px;
    }




    .el-row {
        margin-bottom: 20px;
    }

    .el-row:last-child {
        margin-bottom: 0;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #d8d8d8;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        /*margin-top: 5px;*/
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .block .el-avatar>img {
        height: auto !important;
        margin: 22px auto;
        width: 36px;
    }
    .el-tabs--border-card>.el-tabs__content {
            padding: 0;
        }
    .input-with-select.input-search .el-input__prefix {
        font-size: 35px;
        left: 190px;
        cursor: pointer;
    }

    .input-with-select.input-search .el-input__prefix .iconfont {
        font-size: 35px;
        font-weight: 200;
    }

    .input-with-select.input-search .el-input__prefix .iconfont:hover {
        color: cornflowerblue;
    }

    .input-with-select.input-search .el-input__inner {
        height: 47px;
        /* padding-left:15px;*/
    }

    .input-with-select.input-search .el-input-group__prepend {
        width: 100px;
        padding-left: 5px;
    }

    iconfont iconpaizhao1 .col-md-12 {
        display: block;
        overflow: hidden;
        background-color: #f5f5f5;
    }
</style>

</html>